<template>
  <!-- @touchstart.prevent.stop="handleTouchStart"
    @touchmove.prevent.stop="handleTouchMove"
    @touchend.prevent.stop="handleTouchEnd" -->
  <div
    class="remarksDialog-box"
    :class="{
      'remarksDialog-box-wap': store.isMobileType,
      'dialog-show': store.exhibitsInfoShow,
      'remarksDialog-edit-box': !route.meta.loopType,
    }"
  >
    <t-dialog
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      v-model:visible="store.exhibitsInfoShow"
      width="100vw"
      placement="center"
      :confirm-on-enter="true"
      :on-cancel="onCancel"
      :on-esc-keydown="onEscKeydown"
      :on-close-btn-click="onCloseBtnClick"
      :on-overlay-click="onOverlayClick"
      :on-close="close"
      :on-confirm="onConfirmAnother"
      @selectShowpieceid="selectShowpieceid"
    >
      <component
        :is="getchild"
        @viewImg="viewImg"
        :info="info"
        :list="list"
        :countIndex="count"
        v-if="store.exhibitsShowpieceid && store.exhibitsInfoShow"
      />
    </t-dialog>
    <van-image-preview
      :show-index="WaplookList.length > 1 ? true : false"
      v-model:show="ImgVisible"
      :startPosition="indexs"
      :images="WaplookList"
      :vertical="true"
      @change="changeImage"
    >
    </van-image-preview>
  </div>
</template>
<script setup lang="ts">
import { exhibitShowpiece } from '@/api/templates/templates';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import style1 from './style/index.vue';
import style2 from './style2/index.vue';
import style3 from './style3/index.vue';
import style4 from './style4/index.vue';
import style5 from './style5/index.vue';
import style6 from './style6/index.vue';
import style7 from './style7/index.vue';
import style8 from './style8/index.vue';
import style9 from './style9/index.vue';
import style11 from './style11/index.vue';

import style10 from './style10/index.vue';
import style12 from './style12/index.vue';
import style13 from './style13/index.vue';
import style14 from './style14/index.vue';
import style15 from './style15/index.vue';
import style16 from './style16/index.vue';
import style17 from './style17/index.vue';
import { ref, watch, reactive, nextTick, onMounted, computed } from 'vue';
import { commonDataStore, useProjectStore } from '@/store';
import { useRoute, useRouter } from 'vue-router';

const props = defineProps({
  attachDom: {
    type: Object,
  },
});
const ImgVisible = ref(false);
const Scrollheights = ref();
const WaplookList = ref([]);
const commonStore = commonDataStore();
const indexs = ref(0);
const route = useRoute();
const router = useRouter();
const parmas = reactive({
  pageSize: 200,
  pageNo: 1,
  id: 0,
  value: '',
  FilterId: 0,
});
const store = useProjectStore();
const info = ref({ id: 0 }) as any;
const list = ref([]);
const count = ref(0);

const getchild = computed(() => {
  switch (commonStore.templateId) {
    case 546821049266245:
      return style1;
      break;
    case 568727972499525:
      return style2;
      break;
    case 581876609753157:
      return style3;
      break;
    case 584041224159301:
      return style4;
      break;
    case 594187892883525:
      return style5;
      break;
    case 598779929522245:
      return style6;
      break;
    case 607270742659141:
      return style7;
      break;
    case 609108365123653:
      return style8;
      break;
    case 618322755817541:
      return style9;
    case 621494527193157:
      return style10;
      break;
    case 621784378253381:
      return style11;
      break;
    case 628149200830533:
      return style12;
      break;
    case 643443922464837:
      return style13;
      break;
    case 645568970317893:
      return style14;
      break;
    case 651173498134597:
      return style15;
      break;
    case 661088851107909:
      return style16;
      break;
    case 688032033431621:
      return style17;
      break;
    default:
      return style1;
      break;
  }
});

const changeImage = (index) => {
  count.value = index;
};

const onConfirmAnother = (context) => {
  console.log('点击了确认按钮', context);

  store.exhibitsInfoShow = false;
};
const close = (context) => {
  //   console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
  store.exhibitsInfoShow = false;
};
const viewImg = (list: any, index: number) => {
  WaplookList.value = list;
  indexs.value = index;
  ImgVisible.value = true;
};
const onCancel = (context) => {};
const onEscKeydown = (context) => {};
const onCloseBtnClick = (context) => {};
const onOverlayClick = (context) => {};
const init = async (e?: number | string) => {
  try {
    if (!store.exhibitsShowpieceid) {
      return;
    }
    let { data } = await exhibitShowpiece(store.exhibitsModuleId, e ? e : store.exhibitsShowpieceid);

    info.value = data;
    info.value.images.unshift({
      data: info.value.coverUrl,
      type: -1,
    });
    // const box = document.getElementById('anchor-container');
    // box.scrollTop = 1;
  } catch (err) {
    console.log(err);
  }
};
const selectShowpieceid = (e: number | string) => {
  if (e) {
    init(e);
  }
};
const initList = async () => {
  try {
    moduleShowpieces(localStorage.getItem('projectId'), parmas).then((res) => {
      list.value = res.data.data;
    });
  } catch {}
};
onMounted(() => {
  // document.querySelector('.remarksDialog-edit-box').style.marginTop = '48px';
});
const handleTouchStart = (event) => {
  event.stopPropagation();
  // 阻止默认行为和冒泡
};

const handleTouchMove = (event) => {
  event.stopPropagation();
  // 阻止默认行为和冒泡
  // 你可以在这里处理滑动逻辑
};

const handleTouchEnd = (event) => {
  event.stopPropagation();
  // 阻止默认行为和冒泡（如果需要）
  // event.preventDefault();
  // event.stopPropagation();
  // // 处理滑动结束的逻辑
  // console.log('Touch ended');
};

// 跳转页面关闭展品弹窗
router.beforeEach((to, from, next) => {
  store.exhibitsInfoShow = false;
  next();
});

watch(
  () => store.exhibitsInfoShow,
  () => {
    if (store.exhibitsInfoShow) {
      // init();
    }
  },
  { deep: true },
);
</script>

<style scoped lang="less">
@import './excludFilterStyle/index.less';
.remarksDialog-box {
  position: fixed;
  z-index: 1024;
  // transform: translateZ(0px);
  :deep(.t-dialog) {
    padding: 0;
    background: transparent;
    border: none;
  }
  :deep(.t-dialog__header) {
    display: none;
  }
  :deep(.t-dialog__footer) {
    display: none;
  }

  :deep(.t-dialog__body) {
    padding: 0;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-content: center;
  }
  :deep(.t-dialog__ctx.t-dialog__ctx--fixed) {
    z-index: 2500;
    transform: translateZ(0px);
  }
  :deep(.t-dialog__ctx .t-dialog__position) {
    padding-bottom: 0;
  }
}
.remarksDialog-box-wap {
  :deep(.t-dialog__ctx .t-dialog__position) {
    padding: 0 0 !important;
  }
  ::v-deep .van-image-preview__index {
    z-index: 12;
  }
}
</style>
